<template>
    <div>
        <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left">
            <mu-icon value="menu"></mu-icon>
        </mu-button>
        益多多
        <mu-button flat slot="right">
            <mu-icon value="search"></mu-icon>
        </mu-button>
        </mu-appbar>

        <mu-tabs :value.sync="active2" inverse color="secondary" indicator-color="yellow" full-width>
            <mu-tab>灾区新闻</mu-tab>
            <mu-tab>地区科普</mu-tab>
            <mu-tab>旅游资源</mu-tab>
            <mu-tab>寻人启事</mu-tab>
        </mu-tabs>
        <div class="demo-text" v-if="active2 === 0">
            <table>
              <tr class="text-item" @click="todetail">
                <td>
                  <img src="../../assets/images/10.jpg" alt="">
                </td>
                <td class="texttd">
                 印尼在地震及海啸灾区空降消毒剂 防止疾病传播
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/9.jpg" alt="">
                </td>
                <td class="texttd">
                 驻藏武警部队紧急驰援雅鲁藏布江堰塞湖灾区
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/11.jpg" alt="">
                </td>
                <td class="texttd">
                 新闻特写：日本北海道地震重灾区厚真町的避难生活
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/12.jpg" alt="">
                </td>
                <td class="texttd">
                 惠州惠东台风过境无人员伤亡 总经济损失约5.2亿元
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/25.jpg" alt="">
                </td>
                <td class="texttd">
                 洪水凶猛：寿光暴雨七日后
                </td>
              </tr>
            </table>
        </div>
        <div class="demo-text" v-if="active2 === 1">
            <table>
              <tr class="text-item" @click="todetail1">
                <td>
                  <img src="../../assets/images/26.jpg" alt="">
                </td>
                <td class="texttd">
                  清远阳山
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/27.jpg" alt="">
                </td>
                <td class="texttd">
                  韶关新丰
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/28.jpg" alt="">
                </td>
                <td class="texttd">
                  云浮郁南
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/29.jpg" alt="">
                </td>
                <td class="texttd">
                  惠州龙门
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/18.jpg" alt="">
                </td>
                <td class="texttd">
                  潮州饶平
                </td>
              </tr>
            </table>
        </div>
        <div class="demo-text" v-if="active2 === 2">
            <table>
              <tr class="text-item" @click="todetail2">
                <td>
                  <img src="../../assets/images/30.jpg" alt="">
                </td>
                <td class="texttd">
                  海滩岩近照海山镇“辟龙”
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/31.jpg" alt="">
                </td>
                <td class="texttd">
                  柘林镇“镇风塔” 
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/32.jpg" alt="">
                </td>
                <td class="texttd">
                  黄冈镇“石壁庵”
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/33.jpg" alt="">
                </td>
                <td class="texttd">
                  漳溪镇“青岚冰臼”
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/34.jpg" alt="">
                </td>
                <td class="texttd">
                  柘林镇“白鹭天堂”
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/35.jpg" alt="">
                </td>
                <td class="texttd">
                  高堂镇“金光寺”
                </td>
              </tr>
            </table>
        </div>
        <div class="demo-text" v-if="active2 === 3">
            <table>
              <tr class="text-item" @click="todetail3">
                <td>
                  <img src="../../assets/images/19.jpg" alt="">
                </td>
                <td class="texttd">
                  寻找送养女婴
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/20.jpg" alt="">
                </td>
                <td class="texttd">
                  寻找妹妹
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/21.jpg" alt="">
                </td>
                <td class="texttd">
                  寻找90年送养男孩
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/22.jpg" alt="">
                </td>
                <td class="texttd">
                  寻找91弃养女婴
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/23.jpg" alt="">
                </td>
                <td class="texttd">
                  寻找亲生父母
                </td>
              </tr>
            </table>
        </div>
        <br>
    </div>
</template>

<script>
import axios from "axios";
import carouselImg1 from "../../assets/images/1.jpg";
export default {
  data() {
    return {
      active2: 0,
      carouselImg1,
      new: ""
    };
  },
  methods: {
  todetail(){
    this.$router.push('/share/fdetail')
  },todetail1(){
    this.$router.push('/share/sdetail')
  },todetail2(){
    this.$router.push('/share/tdetail')
  },todetail3(){
    this.$router.push('/share/fourdetail')
  }
  }
};
</script>

<style>
.demo-text {
  padding: 16px;
  background: #fff;
}
.demo-text p {
  margin: 8px 0;
}
table tr td {
  border-bottom: 1px solid rgb(218, 217, 217);
}
table tr td:last-child {
  border-bottom: 0px;
}
.text-item img {
  height: 60px;
  padding: 5px;
  height: 5rem;
  width: 8rem;
  margin-left: 0px;
}
</style>
